<template>
  <div class="home-container">
    <!-- 鼠标粒子效果（全局唯一） -->
    <MouseParticleEffect color="#6d83f2" :size="2" :opacity="0.4" :particleCount="10" />
    
    <!-- 滚动导航指示器 -->
    <div class="scroll-indicator-nav">
      <div 
        v-for="(section, index) in sections" 
        :key="index"
        :class="['scroll-dot', { active: activeSection === index }]"
        @click="scrollToSection(index)"
      ></div>
    </div>

    <!-- 第一部分：英雄区 -->
    <section id="section-0" class="home-section hero-section" ref="section0">
      <div class="hero-fullscreen">
        <!-- 动态背景 -->
        <AnimatedBackground 
          :overlay="true" 
          :noiseOpacity="0.05" 
          color1="rgba(255,255,255,0.7)" 
          color2="rgba(245,245,255,0.5)" 
          :opacity="0.4"
        />
        <div class="hero-bg-pattern"></div>
        <!-- 添加装饰点 -->
        <div class="decoration-dots"></div>
        
        <div class="hero-content">
          <ParallaxEffect :depth="20" :scale="1.02">
            <p class="hero-tagline">{{ $t('home.hero.tagline') }}</p>
            <h1 class="hero-heading">{{ $t('home.hero.heading') }}</h1>
            <p class="hero-description">{{ $t('home.hero.description') }}</p>
            <div class="hero-cta">
              <router-link to="/portfolio" class="cta-button">
                <i class="fas fa-eye"></i> {{ $t('home.hero.viewPortfolio') }}
              </router-link>
              <router-link to="/contact" class="cta-button secondary">
                <i class="fas fa-paper-plane"></i> {{ $t('home.hero.contactMe') }}
              </router-link>
            </div>
          </ParallaxEffect>
        </div>
        
        <div class="hero-visual">
          <div class="circle-1 hero-circle"></div>
          <div class="circle-2 hero-circle"></div>
          <ParallaxEffect :depth="40" :scale="1.05" :glare="true" :shadow="true">
            <img src="/images/avatar.jpg" alt="Java开发工程师工作场景" class="hero-image">
            <div class="image-frame"></div>
          </ParallaxEffect>
        </div>
        
        <div class="scroll-indicator" @click="scrollToSection(1)">
          <i class="fas fa-chevron-down"></i>
          <span>{{ $t('home.hero.scrollDown') }}</span>
        </div>
      </div>
    </section>
    
    <!-- 第二部分：我的专长 -->
    <section id="section-1" class="home-section expertise-section" ref="section1">
      <div class="section-header">
        <span class="section-subtitle">{{ $t('home.expertise.subtitle') }}</span>
        <h2 class="section-title">{{ $t('home.expertise.title') }}</h2>
      </div>
      
      <div class="expertise-grid">
        <ParallaxEffect :depth="15" :scale="1.03" class="expertise-card-wrapper">
          <div class="expertise-card">
            <div class="expertise-icon">
              <i class="fas fa-server"></i>
            </div>
            <h3>{{ $t('home.expertise.backend.title') }}</h3>
            <p>{{ $t('home.expertise.backend.desc') }}</p>
          </div>
        </ParallaxEffect>
        
        <ParallaxEffect :depth="15" :scale="1.03" class="expertise-card-wrapper">
          <div class="expertise-card">
            <div class="expertise-icon">
              <i class="fas fa-database"></i>
            </div>
            <h3>{{ $t('home.expertise.database.title') }}</h3>
            <p>{{ $t('home.expertise.database.desc') }}</p>
          </div>
        </ParallaxEffect>
        
        <ParallaxEffect :depth="15" :scale="1.03" class="expertise-card-wrapper">
          <div class="expertise-card">
            <div class="expertise-icon">
              <i class="fas fa-code-branch"></i>
            </div>
            <h3>{{ $t('home.expertise.distributed.title') }}</h3>
            <p>{{ $t('home.expertise.distributed.desc') }}</p>
          </div>
        </ParallaxEffect>
        
        <ParallaxEffect :depth="15" :scale="1.03" class="expertise-card-wrapper">
          <div class="expertise-card">
            <div class="expertise-icon">
              <i class="fas fa-tachometer-alt"></i>
            </div>
            <h3>{{ $t('home.expertise.performance.title') }}</h3>
            <p>{{ $t('home.expertise.performance.desc') }}</p>
          </div>
        </ParallaxEffect>
      </div>
      
      <!-- 添加技能标签云 -->
      <div class="skill-cloud-wrapper">
        <h3 class="skill-cloud-title">技术栈 & 专业技能</h3>
        <div class="skill-cloud">
          <SkillCloud :skills="skills" :radius="200" />
        </div>
      </div>
      
      <div class="scroll-indicator up" @click="scrollToSection(0)">
        <i class="fas fa-chevron-up"></i>
      </div>
      <div class="scroll-indicator down" @click="scrollToSection(2)">
        <i class="fas fa-chevron-down"></i>
      </div>
    </section>
    
    <!-- 第三部分：精选项目 -->
    <section id="section-2" class="home-section projects-section" ref="section2">
      <div class="section-header">
        <span class="section-subtitle">{{ $t('home.projects.subtitle') }}</span>
        <h2 class="section-title">{{ $t('home.projects.title') }}</h2>
      </div>
      
      <div class="featured-projects">
        <ParallaxEffect 
          v-for="(project, index) in featuredProjects" 
          :key="index"
          :depth="20" 
          :scale="1.02"
          class="featured-project-wrapper"
        >
          <div class="featured-project-card">
            <div class="project-image">
              <img :src="project.image" :alt="project.title">
            </div>
            <div class="project-info">
              <span class="project-category">{{ project.category }}</span>
              <h3 class="project-title">{{ project.title }}</h3>
              <p class="project-description">{{ project.description }}</p>
              <a href="#" class="project-link" @click.prevent="showProjectInfo(project)">
                {{ $t('home.projects.learnMore') }} <i class="fas fa-arrow-right"></i>
              </a>
            </div>
          </div>
        </ParallaxEffect>
      </div>
      
      <div class="center-button">
        <router-link to="/portfolio" class="outline-button">
          查看全部项目 <i class="fas fa-external-link-alt"></i>
        </router-link>
      </div>
      
      <div class="scroll-indicator up" @click="scrollToSection(1)">
        <i class="fas fa-chevron-up"></i>
      </div>
      <div class="scroll-indicator down" @click="scrollToSection(3)">
        <i class="fas fa-chevron-down"></i>
      </div>
    </section>
    
    <!-- 第四部分：联系我 -->
    <section id="section-3" class="home-section contact-section" ref="section3">
      <!-- 添加信封背景 -->
      <div class="envelope-background">
        <div class="envelope">
          <div class="envelope-back"></div>
          <div class="envelope-front"></div>
          <div class="envelope-top"></div>
          <div class="envelope-left"></div>
          <div class="envelope-right"></div>
          <div class="envelope-content"></div>
        </div>
      </div>
      
      <div class="section-header fade-in-element">
        <span class="section-subtitle">{{ $t('home.contact.subtitle') }}</span>
        <h2 class="section-title">{{ $t('home.contact.title') }}</h2>
      </div>
      
      <div class="contact-container fade-in-element">
        <p class="contact-description">
          {{ $t('home.contact.description') }}
        </p>
        
        <div class="contact-quick-info">
          <div class="contact-quick-item">
            <i class="fas fa-envelope"></i>
            <span>pikario@qq.com</span>
          </div>
          <div class="contact-quick-item">
            <i class="fas fa-phone"></i>
            <span>+86 158 2057 8447</span>
          </div>
        </div>
        
        <div class="contact-buttons">
          <router-link to="/contact" class="cta-button">
            <i class="fas fa-paper-plane"></i> {{ $t('home.contact.contactMe') }}
          </router-link>
          <a href="#" class="cta-button secondary">
            <i class="fas fa-download"></i> {{ $t('home.contact.downloadResume') }}
          </a>
        </div>
      </div>
      
      <div class="scroll-indicator up" @click="scrollToSection(2)">
        <i class="fas fa-chevron-up"></i>
      </div>
    </section>

    <!-- 重新设计的模态弹窗组件 -->
    <div :class="['project-modal', {'active': showModal}]" @click.self="closeModal">
      <div class="project-modal-content">
        <div class="project-modal-header">
          <h3>{{ modalTitle }}</h3>
          <button class="close-button" @click="closeModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="project-modal-body">
          <p>{{ modalMessage }}</p>
          
          <div v-if="modalType === 'wechat'" class="qr-code-container">
            <h4 class="project-modal-subtitle">扫描或搜索微信小程序</h4>
            <img src="/images/QRcode.jpg" alt="飞车图鉴小程序码">
          </div>
          
          <div v-if="modalType === 'github'" class="github-info">
            <h4 class="project-modal-subtitle">开源项目地址</h4>
            <a href="https://gitee.com/kzc_666/sql-generator.git" target="_blank" class="github-link">
              <i class="fab fa-github"></i> https://gitee.com/kzc_666/sql-generator.git
            </a>
          </div>
        </div>
        <div class="project-modal-footer">
          <button class="project-modal-button" @click="closeModal">
            我知道了 <i class="fas fa-check"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MouseParticleEffect from '@/components/effects/MouseParticleEffect.vue'
import ParallaxEffect from '@/components/effects/ParallaxEffect.vue'
import SkillCloud from '@/components/effects/SkillCloud.vue'
import AnimatedBackground from '@/components/effects/AnimatedBackground.vue'

export default {
  name: 'HomePage',
  components: {
    MouseParticleEffect,
    ParallaxEffect,
    SkillCloud,
    AnimatedBackground
  },
  data() {
    return {
      activeSection: 0,
      sections: ['hero', 'expertise', 'projects', 'contact'],
      scrolling: false,
      featuredProjects: [
        {
          title: '飞车图鉴小程序',
          category: '小程序',
          image: 'https://images.unsplash.com/photo-1607252650355-f7fd0460ccdb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
          description: '基于 django + 微信小程序原生框架 的游戏工具，目前用户8000+，日活500+。',
          link: '#'
        },
        {
          title: 'SQL测试数据生成器',
          category: '开源项目',
          image: 'https://images.unsplash.com/photo-1537432376769-00f5c2f4c8d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1650&q=80',
          description: '基于vue3的纯前端网页项目，自动生成测试数据SQL语句，支持对接Deepseek等AI大模型。',
          link: '#'
        },
        {
          title: 'Java工具库',
          category: '开源项目',
          image: 'https://images.unsplash.com/photo-1618761714954-0b8cd0026356?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
          description: '开源的Java工具库，提供常用功能的高性能实现，在GitHub获得500+星标。',
          link: '#'
        }
      ],
      showModal: false,
      modalTitle: '',
      modalMessage: '',
      modalType: '',
      // 添加技术技能列表
      skills: [
        'Java', 'Spring Boot', 'Spring Cloud', 'MyBatis', 
        'MySQL', 'Redis', 'MongoDB', 'Elasticsearch',
        'Vue.js', 'React', 'JavaScript', 'TypeScript',
        'Docker', 'Kubernetes', 'Jenkins', 'Git',
        'Kafka', 'RabbitMQ', 'Zookeeper', 'Dubbo',
        'Microservices', 'Design Patterns', 'TDD', 'DevOps',
        'Python', 'Go', 'Node.js', 'HTML/CSS',
        'RESTful API', 'GraphQL', 'WebSocket', 'OAuth',
        'JVM', 'Performance Tuning', 'Concurrency', 'Algorithm'
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initSections();
      setTimeout(() => {
        this.activeSection = 0;
      }, 100);
    });
    window.addEventListener('scroll', this.handleScroll);
    window.addEventListener('wheel', this.handleWheel, { passive: false });
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
    window.removeEventListener('wheel', this.handleWheel);
  },
  methods: {
    scrollToSection(index) {
      if (this.scrolling) return;
      
      this.scrolling = true;
      this.activeSection = index;
      
      const sectionId = `section-${index}`;
      const section = document.getElementById(sectionId);
      
      section.scrollIntoView({
        behavior: 'smooth'
      });
      
      setTimeout(() => {
        this.scrolling = false;
      }, 1000);
    },
    
    handleScroll() {
      if (this.scrolling) return;
    },
    
    handleWheel(e) {
      if (this.scrolling) {
        e.preventDefault();
        return;
      }
      
      if (e.deltaY > 0 && this.activeSection < this.sections.length - 1) {
        e.preventDefault();
        this.scrollToSection(this.activeSection + 1);
      } else if (e.deltaY < 0 && this.activeSection > 0) {
        e.preventDefault();
        this.scrollToSection(this.activeSection - 1);
      }
    },
    
    initSections() {
      const options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1
      };
      
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const sectionId = entry.target.id;
            const sectionIndex = parseInt(sectionId.split('-')[1]);
            if (!this.scrolling) {
              this.activeSection = sectionIndex;
            }
            
            // 如果是联系区域，添加动画类
            if (sectionId === 'section-3') {
              entry.target.classList.add('animate');
            }
          }
        });
      }, options);
      
      for (let i = 0; i < this.sections.length; i++) {
        const section = document.getElementById(`section-${i}`);
        if (section) {
          observer.observe(section);
        }
      }
    },
    
    showProjectInfo(project) {
      this.modalTitle = project.title;
      
      if (project.title.includes('飞车图鉴')) {
        this.modalType = 'wechat';
        this.modalMessage = '请在微信小程序中搜索"飞车图鉴"，点击第一个5.0评分的小程序即可使用。或者扫描下方小程序码直接访问：';
      } else if (project.title.includes('SQL测试数据生成器')) {
        this.modalType = 'github';
        this.modalMessage = '这是一个基于Vue3开发的开源工具，可以帮助开发者快速生成测试数据SQL语句。支持多种数据类型、智能数据关联和大模型集成，极大提高了开发和测试效率。';
      } else {
        this.modalType = 'other';
        this.modalMessage = project.description;
      }
      
      this.showModal = true;
      document.body.style.overflow = 'hidden';
    },
    closeModal() {
      this.showModal = false;
      setTimeout(() => {
        document.body.style.overflow = '';
      }, 400);
    }
  }
}
</script>

<style scoped>
.home-container {
  position: relative;
  overflow: hidden;
}

.home-section {
  min-height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

/* 滚动指示器导航 */
.scroll-indicator-nav {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1000;
}

.scroll-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid var(--primary-color);
  cursor: pointer;
  transition: all 0.3s;
}

.scroll-dot.active {
  background-color: var(--primary-color);
  transform: scale(1.2);
}

/* 部分标题样式 */
.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-subtitle {
  display: block;
  color: var(--secondary-color);
  font-size: 1.1rem;
  margin-bottom: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-title {
  font-size: 2.5rem;
  color: var(--primary-color);
  position: relative;
  padding-bottom: 20px;
}

.section-title::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 3px;
  background-color: var(--primary-color);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* 滚动指示器 */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--dark-text);
  font-size: 0.9rem;
  opacity: 0.7;
  animation: fadeInUp 2s infinite;
  z-index: 3;
  cursor: pointer;
  transition: all 0.3s;
}

.scroll-indicator:hover {
  opacity: 1;
}

.scroll-indicator.up {
  top: 30px;
  bottom: auto;
  animation: fadeInDown 2s infinite;
}

.scroll-indicator.down {
  bottom: 30px;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  100% {
    opacity: 0.7;
    transform: translate(-50%, 0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  100% {
    opacity: 0.7;
    transform: translate(-50%, 0);
  }
}

/* 第一部分：英雄区样式 */
.hero-section {
  padding: 0;
}

.hero-fullscreen {
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  width: 100%;
}

@media (min-width: 992px) {
  .hero-fullscreen {
    flex-direction: row;
  }
}

.hero-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%),
                    linear-gradient(225deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%),
                    linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%),
                    linear-gradient(315deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%);
  background-position: 25px 0, 25px 0, 0 0, 0 0;
  background-size: 50px 50px;
  background-repeat: repeat;
  animation: pattern-shift 120s linear infinite;
  opacity: 0.4;
  z-index: 0;
}

@keyframes pattern-shift {
  0% {
    background-position: 0 0, 25px 0, 0 0, 0 25px;
  }
  100% {
    background-position: 1000px 0, 1025px 0, 1000px 0, 1000px 25px;
  }
}

.hero-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero-image {
  position: relative;
  border-radius: 10px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease;
  max-width: 100%;
  z-index: 2;
  animation: float 6s ease-in-out infinite;
}

.image-frame {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  z-index: 1;
  pointer-events: none;
}

.hero-circle {
  border-radius: 50%;
  position: absolute;
  opacity: 0.6;
  filter: blur(5px);
  z-index: 0;
}

.circle-1 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.4), rgba(140, 82, 255, 0.2));
  top: -100px;
  right: -50px;
  animation: float-slow 15s ease-in-out infinite alternate;
}

.circle-2 {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, rgba(94, 114, 235, 0.3), rgba(67, 97, 238, 0.1));
  bottom: -50px;
  left: 10%;
  animation: float-slow 12s ease-in-out infinite alternate-reverse;
}

@keyframes float-slow {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(20px) rotate(5deg);
  }
  100% {
    transform: translateY(-20px) rotate(-5deg);
  }
}

.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  z-index: 2;
  width: 100%;
  position: relative;
  z-index: 5;
}

@media (min-width: 768px) {
  .hero-content {
    padding: 0 50px;
  }
}

.hero-tagline {
  font-size: 1.2rem;
  color: var(--secondary-color);
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.hero-heading {
  font-size: 3.5rem;
  line-height: 1.2;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.hero-description {
  font-size: 1.2rem;
  margin-bottom: 40px;
  max-width: 500px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.hero-cta {
  display: flex;
  gap: 20px;
}

.cta-button {
  background-color: var(--secondary-color);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 30px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.cta-button.secondary {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.cta-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 992px) {
  .hero-fullscreen {
    flex-direction: column;
    height: auto;
    padding: 50px 0;
  }
  
  .hero-content,
  .hero-visual {
    text-align: center;
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .hero-heading {
    font-size: 2.5rem;
  }
}

/* 高亮效果 */
.hero-visual::before {
  content: '';
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  background: radial-gradient(circle, rgba(67, 97, 238, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
  z-index: -1;
  animation: pulse 6s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.3;
  }
}

/* 鼠标悬浮时的交互效果 */
.hero-content, .hero-visual {
  transition: transform 0.5s ease;
}

.hero-section:hover .hero-content {
  transform: translateX(-5px);
}

.hero-section:hover .hero-visual {
  transform: translateX(5px);
}

/* 第二部分：专长区域 */
.expertise-section {
  background-color: #f8f9fa;
  padding: 80px 20px;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  width: 100%;
}

.expertise-card {
  background-color: white;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.expertise-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.expertise-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background-color: rgba(67, 97, 238, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--primary-color);
}

.expertise-card h3 {
  margin-bottom: 15px;
  color: var(--primary-color);
}

/* 第三部分：项目区域 */
.projects-section {
  padding: 80px 20px;
}

.featured-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 25px;
}

.featured-project-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.project-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.5s;
}

.featured-project-card:hover .project-image img {
  transform: scale(1.05);
}

.project-info {
  padding: 18px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.project-category {
  display: inline-block;
  background-color: rgba(67, 97, 238, 0.1);
  color: var(--primary-color);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  margin-bottom: 15px;
}

.project-title {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--dark-text);
}

.project-description {
  color: #666;
  margin-bottom: 15px;
  flex-grow: 1;
  font-size: 0.95rem;
  line-height: 1.5;
}

.project-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
}

.project-link:hover {
  color: var(--secondary-color);
}

.center-button {
  margin-top: 30px;
  text-align: center;
}

.outline-button {
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  background: transparent;
  padding: 10px 25px;
  border-radius: 30px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.outline-button:hover {
  background-color: var(--primary-color);
  color: white;
}

/* 添加媒体查询确保在较大屏幕上显示三列 */
@media (min-width: 992px) {
  .featured-projects {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 在中等屏幕上显示两列 */
@media (min-width: 768px) and (max-width: 991px) {
  .featured-projects {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 在小屏幕上显示单列 */
@media (max-width: 767px) {
  .featured-projects {
    grid-template-columns: 1fr;
  }
}

/* 第四部分：联系区域 */
.contact-section {
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  color: white;
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
}

.contact-section .section-title {
  color: #f5c542;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  margin-bottom: 25px;
}

.contact-section .section-title::after {
  background-color: #f5c542;
  height: 4px;
  width: 80px;
  bottom: -10px;
}

.contact-section .section-title::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: radial-gradient(circle, #f5c542 30%, transparent 30%);
  background-size: 10px 10px;
  opacity: 0.5;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.contact-section .section-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  letter-spacing: 3px;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 5px 15px;
  border-radius: 20px;
  display: inline-block;
}

.contact-container {
  max-width: 800px;
  text-align: center;
}

.contact-description {
  font-size: 1.1rem;
  margin-bottom: 40px;
  line-height: 1.8;
}

.contact-quick-info {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.contact-quick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
}

.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* 进一步改进联系区域按钮样式 */
.contact-section .cta-button {
  background-color: #f5c542;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border: none;
  color: #333;
  font-weight: 600;
}

.contact-section .cta-button:hover {
  background-color: #ffd54f;
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.contact-section .cta-button.secondary {
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  color: #4361ee;
  backdrop-filter: blur(5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.contact-section .cta-button.secondary:hover {
  background-color: white;
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }

  .expertise-grid {
    grid-template-columns: 1fr;
  }

  .scroll-indicator-nav {
    right: 10px;
  }

  .scroll-dot {
    width: 10px;
    height: 10px;
  }

  .contact-quick-info {
    flex-direction: column;
    gap: 15px;
  }
}

/* 确保暗模式兼容性 */
.dark-mode .expertise-section {
  background-color: #2d3748;
}

.dark-mode .expertise-card,
.dark-mode .featured-project-card {
  background-color: #3a4556;
  color: var(--light-text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.dark-mode .project-title {
  color: var(--light-text);
}

.dark-mode .project-description {
  color: #ddd;
}

.dark-mode .scroll-indicator {
  color: var(--light-text);
}

/* 添加信封背景的CSS样式 */
.envelope-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  opacity: 0.25;
}

.envelope {
  position: relative;
  width: 90vmin;
  height: 60vmin;
  max-width: 900px;
  max-height: 600px;
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(0);
  transition: transform 1s ease;
}

.envelope-back {
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background: linear-gradient(145deg, #3a5bd9, #4361ee);
  border-radius: 10px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
}

.envelope-front {
  width: 100%;
  height: 50%;
  bottom: 0;
  left: 0;
  background: linear-gradient(145deg, #3a5bd9, #4361ee);
  border-top: 3px solid #2c4bce;
  transform-origin: bottom;
  transform: rotateX(180deg);
  transition: transform 1s ease 0.5s;
  border-radius: 0 0 10px 10px;
}

.envelope-top {
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
  background: linear-gradient(145deg, #3a5bd9, #4361ee);
  clip-path: polygon(0 0, 50% 50%, 100% 0);
  transform-origin: top;
  transform: rotateX(-180deg);
  transition: transform 1s ease;
}

.envelope-left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30vmin 45vmin 30vmin 0;
  border-color: transparent #2c4bce transparent transparent;
  left: 0;
  bottom: 0;
}

.envelope-right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30vmin 0 30vmin 45vmin;
  border-color: transparent transparent transparent #2c4bce;
  right: 0;
  bottom: 0;
}

.envelope-content {
  width: 85%;
  height: 85%;
  left: 7.5%;
  top: 7.5%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  transform: translateZ(1px);
  opacity: 0;
  transition: transform 0.5s ease 1s, opacity 0.5s ease 1s;
  border-radius: 5px;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.7) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 信封打开动画类 */
.contact-section.animate .envelope-top {
  transform: rotateX(0deg);
}

.contact-section.animate .envelope-front {
  transform: rotateX(0deg);
}

.contact-section.animate .envelope-content {
  transform: translateZ(80px);
  opacity: 1;
}

.contact-section.animate .envelope {
  transform: rotateX(15deg) rotateY(0);
}

/* 淡入动画 */
.fade-in-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.contact-section.animate .fade-in-element {
  opacity: 1;
  transform: translateY(0);
}

.contact-section .section-header,
.contact-section .contact-container {
  position: relative;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(1px);
  border-radius: 10px;
  padding: 20px;
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
}

.contact-section .section-header {
  transition-delay: 0.8s;
  margin-bottom: 30px;
  padding: 10px 20px;
}

.contact-section .contact-container {
  transition-delay: 1.2s;
  padding: 30px;
}

/* 添加信封中的小细节 - 封口 */
.envelope:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background-color: #f5c542;
  border-radius: 50%;
  z-index: 3;
  opacity: 0.9;
  box-shadow: inset 0 -3px 10px rgba(0, 0, 0, 0.2);
}

/* 添加信封回地址小细节 */
.envelope:after {
  content: '';
  position: absolute;
  top: 10px;
  right: 20px;
  width: 60px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 3;
  border-radius: 3px;
}

/* 重新设计的模态弹窗样式 */
.project-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(23, 37, 85, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  backdrop-filter: blur(5px);
}

.project-modal.active {
  opacity: 1;
  visibility: visible;
}

.project-modal-content {
  background-color: white;
  border-radius: 15px;
  max-width: 550px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(30px) scale(0.95);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), 
              opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  overflow: hidden;
}

.project-modal.active .project-modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.project-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.project-modal-header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--primary-color);
}

.close-button {
  width: 36px;
  height: 36px;
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  color: #555;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.close-button:hover {
  background-color: var(--primary-color);
  color: white;
  transform: rotate(90deg);
}

.project-modal-body {
  padding: 25px 30px 30px;
}

.project-modal-body p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #444;
  margin-bottom: 25px;
}

.project-modal-footer {
  background-color: rgba(0, 0, 0, 0.02);
  padding: 20px 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: flex-end;
}

.project-modal-button {
  padding: 10px 25px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.project-modal-button:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
}

.qr-code-container {
  text-align: center;
  margin: 15px 0;
}

.qr-code-container img {
  max-width: 200px;
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.project-modal-subtitle {
  color: #666;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.github-info {
  margin-top: 20px;
  text-align: center;
}

.github-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
}

.github-link:hover {
  color: var(--secondary-color);
}

/* 技能标签云样式 */
.skill-cloud-wrapper {
  margin-top: 50px;
  text-align: center;
  padding: 20px;
}

.skill-cloud-title {
  font-size: 1.6rem;
  margin-bottom: 20px;
  color: var(--dark-text);
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.skill-cloud-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 2px;
  background-color: var(--primary-color);
}

.skill-cloud {
  width: 100%;
  height: 300px;
  margin: 0 auto;
  max-width: 800px;
}

/* 专长卡片包装器 */
.expertise-card-wrapper {
  border-radius: 10px;
}

/* 项目卡片包装器 */
.featured-project-wrapper {
  border-radius: 10px;
  height: 100%;
}

/* 适应性调整 */
@media (max-width: 768px) {
  .skill-cloud {
    height: 250px;
  }
}

/* 装饰点样式 */
.decoration-dots {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle, rgba(67, 97, 238, 0.2) 1px, transparent 1px),
    radial-gradient(circle, rgba(67, 97, 238, 0.1) 1px, transparent 1px);
  background-size: 30px 30px, 20px 20px;
  background-position: 0 0, 15px 15px;
  opacity: 0.3;
  z-index: 0;
  animation: dots-float 40s linear infinite;
}

@keyframes dots-float {
  0% {
    background-position: 0 0, 15px 15px;
  }
  100% {
    background-position: 300px 300px, 315px 315px;
  }
}

/* 恢复页面动画效果 */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

.hero-image {
  animation: float 6s ease-in-out infinite;
}
</style> 